
.card-box {
	padding-right: 10px;
	padding-left: 10px;
	margin-bottom: 10px;
}

ul.file-multipart-viewbox {
	padding: 0px;
	margin: 0px;
	position: relative;

	li {
		padding: 0px;
		border: dashed 1px #ccc;
		width: 68px;
		height: 68px;
		text-align: center;
		list-style: none;
		float: left;
		margin: 0px 3px 3px 0px;
		border-radius: 5px;
		position: relative;

		.el-icon {
			font-size: 30px;
			color: #0B77FF;
			margin-top: 15px;
		}

		.plus {
			//margin-top: 5px;
			width: 66px;
			height: 66px;
			position: absolute;
			top: 0px;
			left: 0px;

			i {
				margin-top: 18px;
			}
		}

		.plus:hover {
			background: #0B77FF;

			svg {
				color: #fff;
			}
		}

		.preview {
			font-size: 14px;
			width: 66px;
			height: 66px;
			background: #00000088;
			border-radius: 5px;
			position: absolute;
			top: 0px;
			left: 0px;
			display: none;

			i {
				margin-top: 20px;

				:hover svg {
					font-size: 25px;
					color: red;
				}
			}

			svg {
				font-size: 20px;
				color: #fff;
			}
		}

		:hover .preview {
			display: block;
		}

		img {
			max-width: 66px;
			max-height: 66px;
			width: 100%;
			height: 100%;
		}

		img.s-icon {
			max-width: 32px;
			max-height: 32px;
		}

		span {
			font-size: 11px;
			padding: 3px;
			line-height: 13px;
			display: block;
			overflow: hidden;
			color: #666;

			a {
				color: #666;
			}

			a:hover {
				color: #0B77FF;
				text-decoration: underline;
			}
		}
	}

	li:hover {
		border: dashed 1px #0B77FF;
	}
}